import React, { Component } from 'react';
import { Input, Space, List, Avatar, Image, Row, Col } from 'antd';

import { SearchOutlined, FolderOutlined, FileOutlined, UserOutlined } from '@ant-design/icons';

import styles from './index.less';
import allFunc from '/src/assets/allFunc.svg';



class Index extends Component {

    constructor(props) {
        super(props);
        this.state = {
            slogan: "",
            keyword: "",
            preSearch: "",
            searchResult: [],
            cursor: 0,
            iconType: "default",
            relativeCursor: 1,
            subInput: null,
            subInputDetail: null,
            avatar: null,


            title: "偏好设置",
            userName: "刘永亮",
            userSlogan: "苟日新，日日新，又日新",
            plugin: null,
            lastPlugin: null,
            isHome: true,
        };

    }



    componentDidMount() {

    }

    renderWebView = () => {
        const plugin = this.state.plugin
        return (<webview
            id="webview"
            nodeintegration={true}
            nodeintegrationinsubframes={true}
            allowpopups={true}
            disablewebsecurity={true}
            src={plugin.src}
            preload={plugin.preload}
        ></webview>)

    }

    gotoHome = () => {
        const lastPlugin = this.state.plugin
        this.setState({ plugin: null, isHome: true, title: "偏好设置", lastPlugin: lastPlugin })
    }



    renderTitle = () => {
        return (
            <Row className={styles.title}>
                <div className={styles.winControl}>
                    <div className={styles.winCtrClose}><div id="flag">x</div></div>
                    <div className={styles.winCtrMin}><div id="flag">-</div></div>
                    <div className={styles.winCtrMax}><div id="flag"></div></div>
                </div>
                <div className={styles.allFnCtroll} onClick={() => this.gotoHome()}>
                    <img src={allFunc} className={styles.allFunc} />
                </div>
                <div className={styles.titleStr}>
                    {this.state.title}
                </div>

                <div className={styles.search}>
                    <Input
                        prefix={<SearchOutlined style={{ fontSize: 24, color: '#6b6c6c' }} />}
                        autoComplete="off"
                        autoCapitalize="off"
                        autoCorrect="off"
                        placeholder="搜索"
                        onChange={this.onSearch}
                        bordered={false}
                        size="small"
                        autoFocus="autofocus"
                        onChange={this.onSearch}
                        className={styles.mainInput}
                        onDrop={this.inputOnDrop}
                        onKeyDown={this.handleKeyDown}
                    />
                </div>
            </Row>
        )
    }



    openApp = (plugin) => {
        console.info("plugin", plugin)
        const lastPlugin = this.state.plugin
        this.setState({ plugin: plugin, isHome: false, title: plugin.name, lastPlugin: lastPlugin })
    }


    renderHome = () => {
        const apps = []
        for (let i = 0; i < 20; i++) {
            apps.push({
                name: "appName",
                src: "file:///Users/liuyongliang/Desktop/testPlugin/index.html",
                preload: "file:///Users/liuyongliang/Desktop/testPlugin/preload.js",
                icon: allFunc

            })
        }
        return (
            <div>

                <Row className={styles.userInfo}>
                    <div className={styles.userIcon}>
                        <img src={allFunc} className={styles.userIconImg} />
                    </div>
                    <div className={styles.userNameInfo}>
                        <div className={styles.userName}>{this.state.userName}</div>
                        <div className={styles.userSlogan}>{this.state.userSlogan}</div>
                    </div>
                    <div className={styles.userId}>
                        <img src={allFunc} className={styles.userIdIcon} />
                        <div className={styles.userIdDesc}>用户ID</div>
                    </div>
                    <div className={styles.bId}>
                        <img src={allFunc} className={styles.bIdIcon} />
                        <div className={styles.bIdDesc}>私有ID</div>
                    </div>
                </Row>

                <Row justify="start" align="middle" className={styles.sysApp}>
                    {apps.slice(0, 8).map((app, i) => {
                        return (
                            <Col span={3} className={styles.app} key={i} onClick={() => { this.openApp(app) }}>
                                <img src={app.icon} className={styles.appIcon} />
                                <div className={styles.appName}>{app.name}</div>
                            </Col >

                        )
                    })}
                </Row>
                <Row justify="start" align="middle" className={styles.userApp}>
                    {apps.slice(0, 16).map((app, i) => {
                        return (
                            <Col span={3} className={styles.app} key={i} onClick={() => { this.openApp(app) }}>
                                <img src={app.icon} className={styles.appIcon} />
                                <div className={styles.appName}>{app.name}</div>
                            </Col >

                        )
                    })}

                </Row>
                <Row justify="start" align="middle" className={styles.bApp}>
                    {apps.slice(0, 16).map((app, i) => {
                        return (
                            <Col span={3} className={styles.app} key={i} onClick={() => { this.openApp(app) }}>
                                <img src={app.icon} className={styles.appIcon} />
                                <div className={styles.appName}>{app.name}</div>
                            </Col >
                        )
                    })}
                </Row>



            </div>

        )

    }

    webviewHook = () => {
        var webview = document.getElementById("webview");

        var loadstart = () => {
            console.log("loadstart");
        }
        var loadstop = () => {
            console.log("loadstop");
        }
        if (webview) {
            webview.addEventListener("did-start-loading", loadstart);
            webview.addEventListener("did-stop-loading", loadstop);
            webview.addEventListener('dom-ready', () => {
                webview.openDevTools()//webview加载完成，可以处理一些事件了
            })
        }

    }

    renderMain = () => {
        const isHome = this.state.isHome
        if (isHome) {
            return this.renderHome()
        } else if (this.state.plugin != null) {
            return this.renderWebView()
        }
    }

    render() {
        this.webviewHook()
        return (
            <div>
                {this.renderTitle()}
                {this.renderMain()}
            </div >
        );
    }
}


export default Index;